.radio-button {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid var(--color-border-0);
	border-radius: 4px;

	.origin {
		display: flex;
		align-items: center;
		padding: 0.5rem 0.75rem;
		cursor: pointer;

		.circle {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1rem;
			height: 1rem;
			margin-right: 0.5rem;
			border: 1px solid var(--color-border-0);
			border-radius: 0.5rem;

			.center {
				color: var(--color-bg);
			}
		}
	}

	&.checked {
		border: 1px solid var(--color-5);

		.circle {
			background-color: var(--color-5);
			border-color: var(--color-5);

			.center {
				width: 0.75rem;
				height: 0.75rem;
				color: var(--color-bg);
			}
		}
	}

	&:hover {
		border: 1px solid var(--color-5);
	}

	&.borderless {
		border: none !important;
	}
}
